<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="page_top">
      <div class="left_btn" @click="back">
        <img src="../../assets/image/back.png" alt=""/>
      </div>
      <crumbs basetitle="财务" title="员工工资单"></crumbs>
    </div>
    <div class="content">
      <el-card>
        <div class="screen">
          <span class="bord">筛选</span>
          <div class="deleate" @click="clear">
            <img
                style="margin-top: -1px"
                src="../../assets/image/容器.png"
                alt=""
            />
            <span class="clear">清除</span>
          </div>
        </div>
        <div class="screen_condition">
          <div class="l">
            <div>
              <span>月份：</span>
              <el-date-picker
                  v-model="month"
                  type="month"
                  placeholder="请选择日期"
                  size="large"
                  @change="changetime"
              />
            </div>
            <div>
              <span>员工名称：</span>
              <el-input
                  size="large"
                  v-model="rolename"
                  placeholder="请输入员工名称/部门分组"
                  :prefix-icon="Search"
                  @input="changename"
              />
            </div>
          </div>
          <div class="r">
            <div class="dc_btn" style="cursor: pointer" @click="upfile">
              <img src="../../assets/image/导出@2x.png" alt=""/>
              <span>导出当月</span>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 16px">
        <div class="table-list">
          <el-table :data="tableData" style="width: 100%" :header-cell-style="{
              background: '#FAFAFC',
              color: '#202536',
            }">
            <el-table-column align="center" fixed prop="saleName" width="120"/>
            <el-table-column
                align="center"
                prop="phone"
                label="电话号码"
                width="140"
            >
              <template #default="scope"
              >{{ scope.row.phone === null ? "暂无" : scope.row.phone }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="deptName"
                label="组名"
                width="90"
            >
              <template #default="scope"
              >{{ scope.row.deptName === null ? "暂无" : scope.row.deptName }}
              </template>
            </el-table-column>

            <el-table-column
                align="center"
                prop="payPerformance"
                label="发薪业绩"
                width="220"
            >
              <template #default="scope"
              >{{
                  scope.row.payPerformance === null
                      ? "暂无"
                      : "￥" +
                      scope.row.payPerformance +
                      "（ " +
                      scope.row.payCount +
                      "户 ）"
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="payCommission"
                label="发薪提成"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.payCommission === null
                      ? "暂无"
                      : "￥" + scope.row.payCommission
                }}
              </template>
            </el-table-column>

            <el-table-column
                align="center"
                prop="payRenewPerformance"
                label="发薪续费业绩"
                width="160"
            >
              <template #default="scope"
              >{{
                  scope.row.payRenewPerformance === null
                      ? "暂无"
                      : "￥" +
                      scope.row.payRenewPerformance +
                      "（ " +
                      scope.row.payRenewCount +
                      "户 ）"
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="payRenewCommission"
                label="发薪续费提成"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.payRenewCommission === null
                      ? "暂无"
                      : "￥" + scope.row.payRenewCommission
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="wesurePerformance"
                label="日日保业绩"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.wesurePerformance === null
                      ? "暂无"
                      : "￥" + scope.row.wesurePerformance
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="wesureCommission"
                label="日日保提成"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.wesureCommission === null
                      ? "暂无"
                      : "￥" + scope.row.wesureCommission
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="tyxPerformance"
                label="团意保业绩"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.tyxPerformance === null
                      ? "暂无"
                      : "￥" + scope.row.tyxPerformance
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="tyxCommission"
                label="团意保提成"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.tyxCommission === null
                      ? "暂无"
                      : "￥" + scope.row.tyxCommission
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="periodPerformance"
                label="长期保业绩"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.periodPerformance === null
                      ? "暂无"
                      : "￥" + scope.row.periodPerformance
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="periodCommission"
                label="长期保提成"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.periodCommission === null
                      ? "暂无"
                      : "￥" + scope.row.periodCommission
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="elePerformance"
                label="电子签业绩"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.elePerformance === null
                      ? "暂无"
                      : "￥" + scope.row.elePerformance
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="eleCommission"
                label="电子签提成"
                width="120"
            >
              <template #default="scope"
              >{{
                  scope.row.eleCommission === null
                      ? "暂无"
                      : "￥" + scope.row.eleCommission
                }}
              </template>
            </el-table-column>
            <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="120"
            >
              <template #default="scope">
                <el-button
                    link
                    type="primary"
                    size="small"
                    @click="handleClick(scope.row)"
                >查看详情
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 30, 50]"
              layout="total, sizes, prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div> -->
          <pagination
              :total="total"
              :currentPage="currentPage"
              :pageSize="pageSize"
              @SizeChange="handleSizeChange"
              @CurrentChange="handleCurrentChange"
          ></pagination>
        </div>
      </el-card>
    </div>
    <!-- <div>
      <div class="navBox">
        <a href="#title1">标题一</a>
        <a href="#title2">标题二</a>
        <a href="#title3">标题三</a>
      </div>
      <h2 id="title1">对应标题一的内容</h2>
      <div style="height: 400px"></div>
      <h2 id="title2">对应标题二的内容</h2>
      <div style="height: 400px"></div>
      <h2 id="title3">对应标题三的内容</h2>
      <div style="height: 400px"></div>
    </div> -->
    <!-- 弹出层 -->
    <el-drawer
        v-model="drawerout"
        :with-header="false"
        class="drawer"
        :size="isMobile ? '100%' : '40%'"
    >
      <div class="closedrawer" @click="hideout">
        <span>收</span><span>起</span
      ><img src="../../assets/image/组355.png" alt=""/>
      </div>
      <div class="top">
        <div class="top_l_img">
          <img crossorigin="anonymous" :src="changeruleForm.img"/>
        </div>
        <div class="top_c_msg">
          <div class="name_sex">
            <span
                style="font-size: 18px; font-weight: 700; margin-right: 5px"
            >{{ changeruleForm.name }}</span
            >
            <el-icon
                v-show="changeruleForm.sex === '0'"
                style="color: blue; margin-right: 5px"
            >
              <Male
              />
            </el-icon>
            <el-icon
                v-show="changeruleForm.sex === '1'"
                style="color: pink; margin-right: 5px"
            >
              <Female
              />
            </el-icon>
            <el-tag
                type=""
                v-show="changeruleForm.isjob === true"
                style="margin-right: 5px"
            >在职
            </el-tag
            >
            <el-tag
                type="danger"
                v-show="changeruleForm.isjob === false"
                style="margin-right: 5px"
            >离职
            </el-tag
            >
          </div>
          <div class="number_power">
            <span
                class="number"
                style="
                color: rgba(118, 118, 118, 1);
                font-size: 14px;
                margin-right: 5px;
              "
            >{{ changeruleForm.phone }}</span
            >
            <div style="box-sizing: border-box; padding: 5px; font-size: 14px">
              {{ changeruleForm.dept }}
            </div>
          </div>
        </div>
        <div class="r">
          <span
              style="color: rgba(2, 86, 255, 1); font-size: 14px; cursor: pointer"
              @click="openinnerDrawer"
          >修改</span
          >
        </div>
      </div>
      <div class="fgline">工资记录</div>
      <span>月份：</span>
      <el-date-picker
          v-model="value2"
          type="month"
          placeholder="请选择月份"
          @change="changeusertime"
      />
      <el-table
          :data="tableData2"
          height="250"
          style="width: 100%; margin-top: 20px"
          :header-cell-style="{
              background: '#FAFAFC',
              color: '#202536',
            }"
      >
        <el-table-column prop="name" label="产品" width="150">
          <template #default="scope">
            <span v-if="scope.row.productType === '0'">子弹发薪</span>
            <span v-if="scope.row.productType === '1'">电子签</span>
            <span v-if="scope.row.productType === '2'">日日保</span>
            <span v-if="scope.row.productType === '3'">长期保</span>
            <span v-if="scope.row.productType === '4'">发薪续费提成</span>
            <span v-if="scope.row.productType === '5'">微保</span>
          </template>
        </el-table-column>
        <el-table-column prop="royaltyRate" label="提成比例"></el-table-column>
        <el-table-column prop="address" label="业绩">
          <template #default="scope">
            <div v-if="scope.row.productType === '0'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                    ? "暂无"
                    : scope.row.params.pay.firstAmount
              }}
            </div>
            <div v-if="scope.row.productType === '1'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                    ? "暂无"
                    : scope.row.params.ele.eleRechargeCount
              }}
            </div>
            <div v-if="scope.row.productType === '2'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                    ? "暂无"
                    : scope.row.params.wesure.amount
              }}
            </div>
            <div v-if="scope.row.productType === '3'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                    ? "暂无"
                    : scope.row.params.period.periodPremiumCount
              }}
            </div>
            <div v-if="scope.row.productType === '4'">
              {{
                JSON.stringify(scope.row.params) == "{}"
                    ? "暂无"
                    : scope.row.params.pay.renewalAmount
              }}
            </div>
            <div v-if="scope.row.productType === '5'">暂无</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fgline">工作信息</div>
      <span>变更记录：</span>
      <el-select
          v-model="value"
          class="m-2"
          clearable
          placeholder="请选择变更信息"
          @change="changejobmsg"
      >
        <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <Timeline style="margin-left: 70px; margin-top: 20px" :data="orderData"/>
      <div style="display: flex; align-items: center; justify-content: center">
        <el-button
            type="primary"
            class="my_btn"
            style="background-color: #3e5ff5"
            @click="drawerout = false"
        >确定
        </el-button
        >
      </div>
      <el-drawer
          v-model="editdrawer"
          title="修改组员信息"
          class="drawer"
          direction="rtl"
          :size="isMobile ? '100%' : '30%'"
          :append-to-body="true"
      >
        <div class="closeinnerdrawer" @click="hide">
          <span>收</span><span>起</span
        ><img src="../../assets/image/组355.png" alt=""/>
        </div>
        <el-form
            ref="changeruleFormRef"
            :rules="changerules"
            :model="changeruleForm"
            label-width="120px"
            class="demo-ruleForm"
            status-icon
            label-position="top"
        >
          <el-form-item label="名称" prop="name">
            <el-input
                v-model="changeruleForm.name"
                placeholder="请输入名称"
                disabled
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
                v-model="changeruleForm.phone"
                placeholder="请输入手机号"
                disabled
            />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="changeruleForm.sex">
              <el-radio :label="'0'">男</el-radio>
              <el-radio :label="'1'">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="入职时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                    v-model="changeruleForm.date1"
                    type="date"
                    label="Pick a date"
                    placeholder="选择日期"
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker
                    v-model="changeruleForm.date2"
                    label="Pick a time"
                    placeholder="选择时间"
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="选择分组信息" prop="fzmsg">
            <el-cascader
                v-model="changeruleForm.fzmsg"
                :props="props"
                :options="addoptions"
            >
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
              </template>
            </el-cascader>
          </el-form-item>
          <el-form-item label="组员类型" prop="zytype">
            <el-radio-group v-model="changeruleForm.zytype">
              <el-radio :label="5">小组长</el-radio>
              <el-radio :label="6">团队成员</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择角色信息" prop="role">
            <el-select v-model="changeruleForm.role" placeholder="请选择角色">
              <el-option
                  v-for="item in roleoptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否在职" prop="isjob">
            <el-switch v-model="changeruleForm.isjob"/>
          </el-form-item>
          <el-form-item
              label="离职交接人员"
              prop="leavejobconnect"
              v-if="!changeruleForm.isjob"
          >
            <el-select
                filterable
                v-model="changeruleForm.leavejobconnect"
                placeholder="请选择离职交接人"
                @change="changesales"
            >
              <el-option
                  v-for="item in nameoptions"
                  :key="item.id"
                  :label="item.salesName"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="changeresetForm">取消</el-button>
            <el-button
                type="primary"
                @click="changeusermsgsubmitForm(changeruleFormRef)"
                style="background-color: #0256ff"
            >确定
            </el-button
            >
          </div>
        </template>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import mybtn from '../../components/mybtn.vue'
import baseurl from '../../api/env'
// 引入时间线组件
import Timeline from '../../components/timeline.vue'
import {ref, reactive, onMounted, onActivated} from 'vue'
import crumbs from '../../components/crumbs.vue'
import {Calendar, Search} from '@element-plus/icons-vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRoute, useRouter} from 'vue-router'
import {
  getusermsginfoapi,
  getpayrolllistapi,
  getjobmsgapi,
  getdepartmentapi,
  getrolesapi,
  getcrmuserapi,
  changeuserapi,
  getperformanceapi,
  exportpayrollapi,
} from '../../api/api'
import {shake, dateFormat} from '../../utils/utils'
import pagination from '../../components/pagination.vue'
const isMobile = ref((window as any).isMobile)

const router = useRouter()
const route = useRoute()

const hideout = () => {
  drawerout.value = false
}
const addoptions = ref<any>([])
const drawerout = ref(false)
const editdrawer = ref(false)
const changeruleForm = reactive({
  userid: '',
  leavejobconnect: '',
  salesName: '',
  isjob: false,
  role: '',
  dept: '',
  zytype: '',
  fzmsg: [],
  date2: new Date(),
  date1: new Date(),
  sex: '',
  phone: '',
  name: '',
  img: '',
})
const changejobmsg = (val: any) => {
  // console.log(val);
  getjobmsgapi({
    userId: changeruleForm.userid,
    type: val,
  }).then((res) => {
    console.log(res)
    orderData.value = res.data
  })
}
const changesales = (val: any) => {
  nameoptions.value.forEach((ele: any, index: any) => {
    if (ele.id === val) {
      changeruleForm.salesName = ele.salesName
    }
  })
}
const changeusermsgsubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(changeruleForm)
      const timeymd = dateFormat('YYYY-mm-dd', new Date(changeruleForm.date1))
      const timehfs = dateFormat('HH:MM:SS', new Date(changeruleForm.date2))
      changeuserapi({
        userId: changeruleForm.userid,
        deptId: changeruleForm.fzmsg[changeruleForm.fzmsg.length - 1],
        userName: changeruleForm.phone,
        nickName: changeruleForm.name,
        phonenumber: changeruleForm.phone,
        sex: changeruleForm.sex,
        auditStatus: changeruleForm.isjob ? 1 : 2,
        avatar: changeruleForm.img,
        postIds: [changeruleForm.zytype],
        roleIds: [changeruleForm.role],
        receiverSales: JSON.stringify(
            changeruleForm.isjob
                ? {}
                : {
                  id: changeruleForm.leavejobconnect,
                  salesName: changeruleForm.salesName,
                }
        ),
        entryTime: new Date(timeymd + ' ' + timehfs).getTime(),
      }).then((res: any) => {
        console.log(res)
        if (res.code === 200) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
        }
        // getdepartmentuser();
        getpayrolllist()
        editdrawer.value = false
        drawerout.value = false
        changeusermsgresetForm(changeruleFormRef.value)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const changeusertime = (val: any) => {
  const mounth =
      val.getMonth() + 1 >= 10 ? val.getMonth() + 1 : `0${val.getMonth() + 1}`
  const day = new Date(val.getFullYear(), val.getMonth() + 1, 0).getDate()
  getperformanceapi({
    userId: changeruleForm.userid,
    startTime: `${val.getFullYear()}-${mounth}-01`,
    endTime: `${val.getFullYear()}-${mounth}-${day}`,
  }).then((res: any) => {
    console.log(res)
    tableData2.value = res
  })
}
const tableData2 = ref([])
const changeresetForm = () => {
  changeusermsgresetForm(changeruleFormRef.value)
  editdrawer.value = false
}
/**
 * 重置用户消息表单
 *
 * @param formEl 表单实例，若不存在则直接返回
 * @returns 无返回值
 */
const changeusermsgresetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const props = {
  expandTrigger: 'hover' as const,
  label: 'label',
  value: 'id',
}
const changeruleFormRef = ref<FormInstance>()
const options1 = [
  {
    value: '0',
    label: '新增',
  },
  {
    value: '1',
    label: '划出',
  },
  {
    value: '2',
    label: '离职',
  },
]
const roleoptions = ref<any>([])
const changerules = reactive<FormRules>({
  fzmsg: [
    {
      required: true,
      message: '请选择分组',
      trigger: 'change',
    },
  ],
  role: [
    {
      required: true,
      message: '请选择角色',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: '请选择日期',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: '请选择时间',
      trigger: 'change',
    },
  ],
  zytype: [
    {
      required: true,
      message: '请选择组员类型',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
})
const nameoptions = ref<any>([])
const getdepartment = () => {
  getdepartmentapi().then((res: any) => {
    // console.log(res);
    // dataSource.value = res;
    addoptions.value = res
  })
}
onActivated(() => {
  month.value = new Date().toLocaleString()
  const mounth =
      new Date().getMonth() + 1 > 10
          ? new Date().getMonth() + 1
          : `0${new Date().getMonth() + 1}`
  const day = new Date(
      new Date().getFullYear(),
      new Date().getMonth() + 1,
      0
  ).getDate()
  startTime.value = `${new Date().getFullYear()}-${mounth}-01`
  endTime.value = `${new Date().getFullYear()}-${mounth}-${day}`
  queryTime.value = `${new Date().getFullYear()}-${mounth}`
  upfilemonth.value = `${new Date().getFullYear()}-${mounth}`
  getpayrolllist()
  getrolesapi().then((res: any) => {
    // console.log(res);
    roleoptions.value = res.rows
  })
  getcrmuserapi(1).then((res) => {
    // console.log(res);
    nameoptions.value = res
  })
  getdepartment()
})
// onMounted(() => {
//   month.value = new Date().toLocaleString()
//   const mounth =
//       new Date().getMonth() + 1 >= 10
//           ? new Date().getMonth() + 1
//           : `0${new Date().getMonth() + 1}`
//   const day = new Date(
//       new Date().getFullYear(),
//       new Date().getMonth() + 1,
//       0
//   ).getDate()
//   startTime.value = `${new Date().getFullYear()}-${mounth}-01`
//   endTime.value = `${new Date().getFullYear()}-${mounth}-${day}`
//   queryTime.value = `${new Date().getFullYear()}-${mounth}`
//   upfilemonth.value = `${new Date().getFullYear()}-${mounth}`
//   getpayrolllist()
//   getrolesapi().then((res: any) => {
//     // console.log(res);
//     roleoptions.value = res.rows
//   })
//   getcrmuserapi(1).then((res) => {
//     // console.log(res);
//     nameoptions.value = res
//   })
//   getdepartment()
// })

const changetime = (val: any) => {
  console.log(2121, val)
  let month = ''
  if (val) {
    month =
        val.getMonth() + 1 >= 10 ? val.getMonth() + 1 : `0${val.getMonth() + 1}`
    const day = new Date(val.getFullYear(), val.getMonth() + 1, 0).getDate()
    upfilemonth.value = `${val.getFullYear()}-${month}`
    startTime.value = `${val.getFullYear()}-${month}-01`
    endTime.value = `${val.getFullYear()}-${month}-${day}`
    queryTime.value = `${val.getFullYear()}-${month}`
  }
  getpayrolllist()
}
const changename = (val: any) => {
  shake(getpayrolllist, 1000)
}
const startTime = ref('')
const endTime = ref('')
const queryTime = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const handleCurrentChange = (val: any) => {
  currentPage.value = val
  getpayrolllist()
}
const handleSizeChange = (val: any) => {
  pageSize.value = val
  getpayrolllist()
}
const value = ref('')

const getpayrolllist = () => {
  getpayrolllistapi({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    searchText: rolename.value,
    // startTime: startTime.value,
    // endTime: endTime.value,
    queryTime: queryTime.value,
  }).then((res: any) => {
    console.log(res)
    total.value = res.totalCount
    tableData.value = res.list
  })
}
// 选择器数据
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const ruleFormRef = ref<FormInstance>()
// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const value2 = ref('')
// 重置/取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
// 表单规则
const rules = reactive<FormRules>({
  name: [
    {required: true, message: '请输入名称', trigger: 'blur'},
    {min: 3, max: 40, message: '名称至少3位', trigger: 'blur'},
  ],
  tel: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    {
      pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    {required: true, message: 'Please input activity form', trigger: 'blur'},
  ],
})
// 表单数据
const ruleForm = reactive({
  name: '',
  tel: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

// 时间线数据
const orderData = ref([])
// 表格数据
const tableData1 = [
  {
    name: '发信系统',
  },
  {
    name: '发信续费',
  },
  {
    name: '日日保',
  },
  {
    name: '长期保',
  },
  {
    name: '电子签',
  },
]
const tableData = ref([])
// 查看详情按钮
const handleClick = (val: any) => {
  console.log(val)
  value.value = ''
  changeusermsgresetForm(changeruleFormRef.value)
  const mounth =
      new Date().getMonth() + 1 >= 10
          ? new Date().getMonth() + 1
          : `0${new Date().getMonth() + 1}`
  const day = new Date(
      new Date().getFullYear(),
      new Date().getMonth() + 1,
      0
  ).getDate()
  getperformanceapi({
    userId: val.userId,
    startTime: `${new Date().getFullYear()}-${mounth}-01`,
    endTime: `${new Date().getFullYear()}-${mounth}-${day}`,
  }).then((res: any) => {
    // console.log(res);
    tableData2.value = res
  })
  getjobmsgapi({userId: val.userId, type: value.value}).then((res) => {
    console.log(res)
    orderData.value = res.data
  })
  getusermsginfoapi(val.userId).then((res: any) => {
    console.log(res)
    changeruleForm.role = res.roles[0].roleId
    changeruleForm.fzmsg = res.deptIds
    changeruleForm.zytype = res.postId
  })
  value2.value = new Date().toString()
  changeruleForm.dept = val.deptName
  changeruleForm.name = val.saleName
  changeruleForm.userid = val.userId
  changeruleForm.phone = val.phone
  changeruleForm.sex = val.sex
  changeruleForm.isjob = val.status === '0' ? true : false
  changeruleForm.zytype = val
  changeruleForm.img = val.salesHeadUrl
  // changeruleForm.date1 = new Date(val.createTime);
  // changeruleForm.date2 = new Date(val.createTime);
  drawerout.value = true
}
const openinnerDrawer = () => {
  editdrawer.value = true
}
// 弹出层状态
const drawer = ref(false)
const innerDrawer = ref(false)
const hideinner = () => {
  innerDrawer.value = false
}
const month = ref<any>('')
const upfilemonth = ref<any>('')
const rolename = ref<string>('')
// 导出按钮
const upfile = () => {
  // console.log("导出");
  exportpayrollapi(upfilemonth.value).then((res) => {
    ElMessage({
      message: '导出成功',
      type: 'success',
    })
    window.location.href =
        baseurl + '/common/download?delete=true&fileName=' + res
  })
}
// 清除
const clear = () => {
  rolename.value = ''
  getpayrolllist()
}
// 收起
const hide = () => {
  editdrawer.value = false
}
const back = () => {
  window.history.back()
}
</script>

<style lang="scss" scoped>
.content {
  max-height: 800px;
  overflow: auto;
  box-sizing: border-box;
  margin: 16px;
}

.screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: 2px solid #f4f4f7;

  .deleate {
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .bord {
    font-weight: 700;
  }

  img {
    margin-right: 10px;
    margin-top: 5px;
  }

  .clear {
    color: rgba(148, 151, 177, 1);
    font-size: 14px;
  }
}

.screen_condition {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .l {
    display: flex;
    width: 60%;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;

    div {
      display: flex;
      align-items: center;
      justify-content: start;
      width: 90%;

      span {
        flex-shrink: 0;
        font-size: 16px;
      }
    }
  }
}

.closeinnerdrawer {
  cursor: pointer;
  position: fixed;
  top: 50px;
  right: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 59px;
  background-color: #0256ff;
  font-size: 14px;
  color: #ffffff;

  img {
    margin-top: 5px;
  }
}

.drawer {
  .closedrawer {
    cursor: pointer;
    position: fixed;
    top: 50px;
    right: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 59px;
    background-color: #0256ff;
    font-size: 14px;
    color: #ffffff;

    img {
      margin-top: 5px;
    }
  }

  .top {
    // background-color: red;
    display: flex;
    align-items: center;

    .top_l_img {
      margin-right: 14px;
      width: 56px;
      height: 56px;
      border-radius: 4px;

      img {
        width: 100%;
        border-radius: 4px;
        height: 100%;
      }
    }

    .top_c_msg {
      flex: 1;

      .number_power {
        display: flex;
        align-items: center;
      }

      .name_sex {
        display: flex;
        align-items: center;
      }
    }
  }
}

.table-list {
  min-height: 580px;
}

.fgline {
  background-color: rgba(250, 250, 252, 1);
  height: 26px;
  margin-top: 24px;
  border-left: 5px solid rgba(2, 86, 255, 1);
  padding-left: 10px;
  font-size: 14px;
  line-height: 26px;
}

// .pagination {
//   margin-top: 20px;
//   display: flex;
//   align-items: center;
//   justify-content: end;
// }
.left_btn {
  width: 32px;
  height: 22px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
